<template>
  <div class="slideshow" v-show="isShow">
    <!--关闭 B-->
    <div class="close" @click="closeP">
      <img src="../../static/images/icon/close.png" alt="">
    </div>
    <!--关闭 E-->
    <div class="sli_main">
      <div class="bigP">
        <img id="pcr" v-if="isMp4(Pictures)=='照片'" :src="masterMap(Pictures)" alt="">
        <video v-if="isMp4(Pictures)=='视频'" controls :src="isvideocloud(Pictures)"></video>
      </div>
      <div class="smallP">
        <div class="tb" @click="lookLeft" style="margin-bottom: .2rem;">
          <img src="../../static/images/icon/x.png" alt="">
        </div>
        <div class="cr">
          <ul ref="bx" id="bxr">
            <li v-for="(l,index) in List" @click="lookbp(l,index)">
              <img :src="isMp4(l)=='照片'?iscloud(l):'../../static/images/shipin.jpg'" alt="">
            </li>
          </ul>
        </div>

        <div class="tb" @click="lookRight" style="margin-top: .2rem;">
          <img src="../../static/images/icon/s.png" alt="">
        </div>
      </div>
    </div>

    <div class="num">
      <div style="margin-left: 3rem;font-size: .24rem;color: #FFFFFF">
        <span>{{inx + 1}}/{{List.length}}</span>

        <img
          @click="rp"
          style="margin-left: 8rem;width: .4rem;height: .4rem;cursor: pointer" src="../../static/images/icon/xz.png"
          alt="">
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        List: [],
        Pictures: '',
        upper: 0,
        isShow: false,
        inx: 0,
        rm: 0,
      }
    },
    created() {

    },
    mounted() {
      this.$refs.bx.style.height = this.List.length * 1.8 + 'rem';
    },
    methods: {
      acceptData(d) {
        this.isShow = true;
        this.List = d;
        this.Pictures = d[0];
        var vm = this;

        $(function () {
          var maxWidth = $('.bigP').width();
          var maxHeight = $('.bigP').height();
          var path = $('#pcr').attr('src');
          if (vm.isMp4(vm.Pictures) == '照片') {
            vm.AutoSize(path, maxWidth, maxHeight);
          }
        })


      },
      lookbp(p, index) {
        this.Pictures = p;
        this.inx = index;
        this.rm = 0;
        $("#pcr").css("transform", "rotate(0deg)");
        var vm = this;
        $(function () {
          var maxWidth = $('.bigP').width();
          var maxHeight = $('.bigP').height();
          var path = $('#pcr').attr('src');
          if (vm.isMp4(vm.Pictures) == '照片') {
            vm.AutoSize(path, maxWidth, maxHeight);
          }
        })
      },
      lookLeft() {
        if (this.upper > 0) {
          this.upper--;
          let inx = this.upper - 1;
          let s = this.upper * 1.8;
          $("#bxr").stop().animate({top: -s + 'rem'}, 'normal');
//          this.Pictures = this.List[inx]
        }
      },
      lookRight() {
        let max = this.List.length;
        if (this.upper < max - 1) {
          this.upper++;
          let inx = this.upper - 1;
          let s = this.upper * 1.8;
          $("#bxr").stop().animate({top: -s + 'rem'}, 'normal');
//          this.Pictures = this.List[inx]
        }
      },
      closeP() {
        this.isShow = false;
        this.rm = 0;
        $("#pcr").css("transform", "rotate(0deg)");
      },
      rp() {
        this.rm++;
        $("#pcr").css("transform", "rotate(" + this.rm * 90 + "deg)");
        var vm = this;
        $(function () {
          if (vm.rm % 2 == 0) {
            var maxWidth = $('.bigP').width();
            var maxHeight = $('.bigP').height();
          } else {
            var maxWidth = $('.bigP').height();
            var maxHeight = $('.bigP').width();
          }

          var path = $('#pcr').attr('src');
          if (vm.isMp4(vm.Pictures) == '照片') {
            vm.AutoSize(path, maxWidth, maxHeight);
          }
        })
      },

      AutoSize(Img, maxWidth, maxHeight) {
        var image = new Image();
        image.src = Img;
        image.onload = function () {
          if (image.width < maxWidth && image.height < maxHeight) {
            $("#pcr").css({width: image.width, height: image.height})
          } else {
            if (maxWidth / maxHeight <= image.width / image.height) {
//              $("#pcr").width(maxWidth);
//              $("#pcr").height(maxWidth * (image.height / image.width));
              $("#pcr").animate({width: maxWidth, height: maxWidth * (image.height / image.width)}, 'fast');
//              $("#pcr").animate({height: maxWidth * (image.height / image.width)}, 'fast');
            } else {
              $("#pcr").animate({width: maxHeight * (image.width / image.height), height: maxHeight}, 'fast');
//              $("#pcr").animate({height: maxHeight}, 'fast');
//              $("#pcr").width(maxHeight * (image.width / image.height));
//              $("#pcr").height(maxHeight);
            }
          }
        }

      },


      //原图展示
      masterMap(p) {
        if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
          return p
        } else {
          let arr = p.split("/");
          let str = 'orginal_' + p.split("/")[p.split("/").length - 1];
          arr[arr.length - 1] = str;
          arr = arr.join('/');
          return '/iapi' + arr;
        }
      },
      //判断云服务or本地服务
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|100h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_100,m_lfit'
        }
        return '/iapi' + p

      },
      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },
      //判断视频来源
      isvideocloud(p) {
        if (p) {
          if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
            return p
          }
          return '/iapi' + p
        }
      },
    }
  }
</script>
<style>
  @import "../../static/css/slideshow.css";
</style>
